<template>
  <el-dialog title="添加用户" :visible="visible" @close="hide">
    <el-form
      label-width="100px"
      :model="form"
      :rules="rules"
      status-icon
      ref="form"
    >
      <el-form-item label="账号" prop="username">
        <el-input autocomplete="off" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="nickName">
        <el-input autocomplete="off" v-model="form.nickName"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input autocomplete="off" v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          autocomplete="off"
          type="password"
          v-model="form.password"
          :disabled="did !== -1"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          autocomplete="off"
          type="textarea"
          :rows="5"
          v-model="form.note"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio v-model="form.status" :label="1">是</el-radio>
        <el-radio v-model="form.status" :label="0">否</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hide">取 消</el-button>
      <el-button @click="sureFn" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import { addUser, getUserInfoById, updateUserInfo } from '@/request/api'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    did: {
      type: Number,
      default: -1
    }
  },
  data() {

    // 自定义的 用户的 校验规则
    const validateUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
      // 要求用户名一定要是 3~8 个数字字母_组合
      if (!/^\w{3,8}$/.test(value)) {
        return callback(new Error('用户名必须是3~8个数字字母下划线的组合'));
      }
      callback()
    }

    const validateEmail = (rule, val, callback) => {
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val)) {
        return callback(new Error('请填写正确的邮箱格式'))
      }
      callback()
    }

    return {
      form: {
        email: '', nickName: '',
        note: '',
        username: '',
        password: '',
        status: 1
      },
      rules: {
        username: [
          { validator: validateUserName, trigger: 'blur', required: true },
        ],
        email: [
          { trigger: 'blur', validator: validateEmail, required: true }
        ],
        nickName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    hide() {
      this.$emit('show', false)
      // 当表单关闭，就把表单数据清空
      this.form = {}
    },
    addUserFn() {
      // 把表单里面的数据进行提交
      addUser({
        ...this.form
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('添加用户成功')
          // 同时把dialog关闭
          this.hide()
        }
      })
    },
    updateUser() {
      updateUserInfo(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.hide()
        }
      })
    },
    sureFn() {
      // 表单验证
      this.$refs.form.validate().then(() => {
        if (this.did === -1) {
          this.addUserFn()
        } else {
          this.updateUser()
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getInfoById() {
      if (this.did !== -1) {
        getUserInfoById(this.did).then(res => {
          // console.log(res);
          if (res.code === 200) {
            this.form = res.data
          }
        })
      }
    }
  },
  watch: {
    did(newVal, oldVal) {
      if (newVal !== -1) {
        this.getInfoById()
      }
    }
  }
}
</script>
 
<style lang = "less" scoped>
</style>